<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useMisApi } from '@/api/mis'
import { useUserInfo } from '@/stores/userInfo'
import { Check } from '@element-plus/icons-vue'
import { toFormatTime } from '@/utils'
import type { BusinessUIFile } from '@/types/custom'

import TemplateAnnex from '@/views/components/form/components/TemplateAnnex.vue'

const { GetBulletinList, GetBulletin } = useMisApi()
const { userInfos } = useUserInfo()

interface BulletinType {
  id?: string
  title: string
  is_top?: boolean
  modified_on: string
  format_time?: string
  content?: string
  app_user_name?: string
  app_date?: string
  files?: BusinessUIFile[]
}

const items = ref<BulletinType[]>()
const modal = ref(false)
const row = ref<BulletinType>({ title: '', modified_on: '', app_user_name: '', app_date: '' })

const onFetch = () => {
  GetBulletinList({
    page: 1,
    pageSize: 10,
    deps: userInfos.dep_id ? [userInfos.dep_id] : [],
    orgs: userInfos.org_id ? [userInfos.org_id] : []
  }).then(({ data }) => {
    data.items.forEach((v: BulletinType) => {
      v.format_time = toFormatTime(v.modified_on)
    })
    items.value = data.items
  })
}

/**
 * 点击公告 - 公告详情
 * @param item
 */
const onBulletin = (item: BulletinType) => {
  GetBulletin({ id: item.id })
    .then(({ data }) => {
      data.format_time = toFormatTime(data.modified_on)
      row.value = data
    })
    .finally(() => {
      modal.value = true
    })
}

onMounted(() => {
  onFetch()
})
</script>

<template>
  <div>
    <div class="font-bold">公告</div>
    <div>
      <div v-for="(item, index) in items" :key="index" class="mt10">
        <div class="flex align-center" style="line-height: 15px">
          <vxe-icon v-if="item.is_top" name="fixed-right-fill" class="mr5 color-danger" />
          <vxe-icon v-else name="fixed-right" class="mr5" />
          <el-link @click="onBulletin(item)">{{ item.title }}</el-link>
          <!--        <div class="ml-auto flex align-center">-->
          <!--          <span class="color-info">更新于{{ item.format_time }}</span>-->
          <!--          <el-icon class="ml10">-->
          <!--            <Sunny />-->
          <!--          </el-icon>-->
          <!--        </div>-->
        </div>
        <div class="ml30 color-info text-overflow-2">{{ item.content }}</div>
      </div>
    </div>
    <vxe-modal
      v-model="modal"
      :title="row.title"
      show-zoom
      show-footer
      :show-minimize="false"
      :dblclick-zoom="false"
      resize
      width="80%"
      height="80%"
      destroy-on-close
      transfer
      class-name="custom-modal"
    >
      <div class="pa10">
        <div class="card-header">
          <span>发布时间：{{ row.app_date }}</span>
        </div>
        <div style="white-space: pre-wrap">{{ row.content }}</div>

        <TemplateAnnex disabled v-model="row.files" class="mt10"></TemplateAnnex>

        <div style="width: 100%; height: 50px"></div>
      </div>
      <template #footer>
<!--        <div class="w100 flex align-center justify-between mt5">-->
<!--          <div>-->
<!--            <span>更新于：{{ row.format_time }}；</span>-->
<!--            <span>审批人：{{ row.app_user_name }}</span>-->
<!--          </div>-->
<!--          <el-button type="primary" :icon="Check" @click="modal = false"> 知道了</el-button>-->
<!--        </div>-->
        <el-button type="primary" :icon="Check" @click="modal = false"> 知道了</el-button>
      </template>
    </vxe-modal>
  </div>
</template>
